---
title: Hover Card
description: For sighted users to preview content available behind a link.
author:
  name: imskyleen
  url: https://github.com/imskyleen
---

<ComponentPreview name="demo-components-radix-hover-card" />

## Installation

<ComponentInstallation name="components-radix-hover-card" />

## Usage

```tsx
<HoverCard>
  <HoverCardTrigger>Hover me</HoverCardTrigger>
  <HoverCardContent>
    <p>Hover card content</p>
  </HoverCardContent>
</HoverCard>
```

## API Reference

### HoverCard

<div className="flex flex-col gap-2">
<ExternalLink
  href="https://animate-ui.com/docs/primitives/radix/hover-card#hovercard"
  text="Animate UI API Reference - HoverCard Primitive"
/>

<ExternalLink
  href="https://www.radix-ui.com/primitives/docs/components/hover-card#root"
  text="Radix UI API Reference - HoverCard.Root"
/>
</div>

### HoverCardTrigger

<div className="flex flex-col gap-2">
<ExternalLink
  href="https://animate-ui.com/docs/primitives/radix/hover-card#hovercardtrigger"
  text="Animate UI API Reference - HoverCard Trigger Primitive"
/>

<ExternalLink
  href="https://www.radix-ui.com/primitives/docs/components/hover-card#trigger"
  text="Radix UI API Reference - HoverCard.Trigger"
/>
</div>

### HoverCardContent

<div className="flex flex-col gap-2">
<ExternalLink
  href="https://animate-ui.com/docs/primitives/radix/hover-card#hovercardcontent"
  text="Animate UI API Reference - HoverCard Content Primitive"
/>

<ExternalLink
  href="https://www.radix-ui.com/primitives/docs/components/hover-card#content"
  text="Radix UI API Reference - HoverCard.Content"
/>
</div>

<TypeTable
  type={{
    transition: {
      description: 'The transition of the hover card content.',
      type: 'Transition',
      required: false,
      default: "{ type: 'spring', stiffness: 300, damping: 25 }",
    },
    '...props': {
      description: 'The props of the hover card content.',
      type: 'HTMLMotionProps<"div">',
      required: false,
    },
  }}
/>

<Callout type="info">
  The `asChild` and `forceMount` props are not supported in the
  `HoverCardContent` component as it is used for animation.
</Callout>

## Credits

- [Radix UI Hover Card](https://www.radix-ui.com/primitives/docs/components/hover-card)
- Credit to [shadcn/ui](https://ui.shadcn.com/docs/components/hover-card) for style inspiration.
